<template>
  <tab>
    <tab-item :selected="selected == 1" @on-item-click="goPath('realData')">
      <div>
        <i class="icon icon-shequ skyBlue-icon"></i>
        <span>实时数据</span>
      </div>
    </tab-item>
    <tab-item :selected="selected == 2" @on-item-click="goPath('historyData')">
      <div>
        <i class="icon icon-shequ skyBlue-icon"></i>
        <span>历史数据</span>
      </div>
    </tab-item>
    <tab-item :selected="selected == 3" @on-item-click="goPath('alarmInformation')">
      <div>
        <i class="icon icon-shequ skyBlue-icon"></i>
        <span>报警信息</span>
      </div>
    </tab-item>
  </tab>

</template>

<script>
  import {Tab, TabItem, Icon} from 'vux'


  export default {
    components: {
      Tab,
      TabItem,
      Icon,
    },
    mounted() {

    },
    props: {
      selected: {
        type: String,
        default: ''
      }
    },
    data () {
      return {}
    },
    watch: {},
    methods: {
      goPath(name){
        this.$router.push({
          name: name
        });
      }
    }
  }
</script>

<style scoped>
  .weui-tabbar {
    background: #fff;
  }
</style>
<style>
  .weui-tabbar__item.weui-bar__item_on p.weui-tabbar__label {
    background: #4791d2;
    color: #fff;
  }
</style>
